<template>
  <div class="answer-container">
    <el-card class="answer-card">
      <template #header>
        <div class="card-header">
          <span>批改结果</span>
          <el-button type="primary" @click="downloadResult">下载结果</el-button>
        </div>
      </template>
      
      <div class="score-section">
        <el-tag type="success" size="large">总分: {{ score }}/100</el-tag>
      </div>
      
      <el-divider />
      
      <div class="answer-content" v-html="formattedContent"></div>
    </el-card>
  </div>
</template>

<script setup>
import { computed, ref } from 'vue';
import { ElMessage } from 'element-plus';

const props = defineProps({
  result: {
    type: Object,
    required: true
  }
});

// 从AI响应中提取分数
const score = computed(() => {
  const content = props.result.choices[0].message.content;
  const scoreMatch = content.match(/总分[:：]\s*(\d+)/);
  return scoreMatch ? scoreMatch[1] : '--';
});

// 格式化内容，高亮显示答案
const formattedContent = computed(() => {
  let content = props.result.choices[0].message.content;
  
  // 处理特殊标记
  content = content.replace(/<\|begin_of_box\|>(.*?)<\|end_of_box\|>/g, 
    '<span class="highlight-answer">$1</span>');
  
  // 保留换行
  content = content.replace(/\n/g, '<br>');
  
  return content;
});

const downloadResult = () => {
  // 实现下载逻辑
  ElMessage.success('下载功能待实现');
};
</script>

<style scoped>
.answer-container {
  margin-top: 30px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.score-section {
  margin-bottom: 20px;
  text-align: center;
}

.answer-content {
  line-height: 1.6;
}

.highlight-answer {
  background-color: #f0f9eb;
  color: #67c23a;
  padding: 2px 5px;
  border-radius: 3px;
  font-weight: bold;
}
</style>